<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="dao" @click="gotowhere()">
      <el-progress
        :width="80"
        type="circle"
        :percentage="percentage"
        :stroke-width="4"
      />
    </div>
    <img :src="img404" alt="" class="myimg" />
    <span
      class="spandot"
      v-for="(l, i) in spanNum"
      :key="i"
      :style="{
        left: l.x,
        top: l.y,
        animationDelay: l.rate + 's',
        transform: 'translate(' + l.scaler + ')',
        background: l.rgba,
      }"
    >
    </span>
  </div>
</template>



<script>
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  onUnmounted,
  onComputed,
  onWatch,
} from "vue";
import img404 from "@/assets/images/404.png";
import { useRouter } from "vue-router";
var timer = null;
export default {
  name: "404",

  setup(props, context) {
    const bgstar = ref(); // 绑定ref
    const router = useRouter();
    const state = reactive({
      //绑定响应式数据
      img404,
      count: 2000,
      spanNum: [],
      percentage: 0,
    });

    // 组件初始化
    onMounted(() => {
      console.log("qqqqqqqqqqqq");
      spanInit();
      countDown();
    });

    // 组件销毁
    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
    });

    const countDown = () => {
      timer = setInterval(() => {
        if (state.percentage < 100) {
          state.percentage += 1;
        } else {
          clearInterval(timer);
          timer = null;
          // 跳转
          router.push({ name: "login" });
        }
      }, 50);
    };

    const gotowhere = () => {
      router.push({ name: "login" });
    };

    // methods
    const changeCount = () => {
      state.count++;
    };
    const spanInit = () => {
      var width = document.getElementById("bgstar").clientWidth;
      var height = bgstar.value.clientHeight; // ref.value

      for (var i = 0; i < 520; i++) {
        // 随机位置
        var x = Math.floor(Math.random() * width);
        var y = Math.floor(Math.random() * height);

        // 随机频率
        var rate = Math.random() * 2.5;

        // 随机大小
        var scaler = Math.random() * 1.5;

        // 随机颜色
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var a = Math.random() * 1;

        state.spanNum.push({
          x: x + "px",
          y: y + "px",
          rate,
          scaler,
          rgba: `rgba(${r},${g},${b},${a})`,
        });
      }
    };
    return {
      ...toRefs(state), // 数据挂载到组件上
      bgstar,
      changeCount,
      gotowhere,
    };
  },
};
</script>








<style lang="scss" scoped>
p {
  color: #fff;
}
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
